<template>
    <div>
      <div class="card card-custom gutter-b example example-compact" id="tableBody">
        <div class="card-header">
          <div class="card-title">
            <span class="card-icon">                           
              <span class="svg-icon svg-icon-primary svg-icon-2x">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <polygon points="0 0 24 0 24 24 0 24"/>
                        <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,
                        8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,
                        4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                        <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,
                        15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,
                        21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                    </g>
                </svg>
              </span>
            </span>
            <h3 class="card-label"> 在线用户列表 </h3>
          </div>
          <div class="card-toolbar">
            <div class="example-tools justify-content-center">     
              <a href="#" class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3"  @click="resetAll()">
                <i class="el-icon-loading"></i>刷新
              </a>          
            </div>
          </div>
        </div>
        <!--分页组件-->
        <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row :data="accountOnlineDataList" >
          <!-- 复选框 -->
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column label="序号" min-width="50">
            <template slot-scope="scope">
              {{scope.$index+1}} 
            </template>
          </el-table-column>
          <el-table-column align="center" prop="oauthAccountEntity.account" label="账号" min-width="100"></el-table-column>
          <el-table-column align="center" prop="oauthAccountEntity.name" show-overflow-tooltip  label="姓名" min-width="100"></el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="oauthAccountEntity.type"  label="类型" min-width="200">
            
          </el-table-column>
          <el-table-column align="center" prop="oauthAccountEntity.last_login_time"  label="上次登录时间" min-width="160"></el-table-column>
          <el-table-column align="center" label="操作" fixed="right" min-width="240">
            <template slot-scope="scope">
              <!--scope.row当前行的对象-->
              <a href="javascript:;" @click="removeAccount(scope.row)" class="btn btn-sm btn-clean btn-icon" title="剔除">	                            
                    <span class="svg-icon svg-icon-primary svg-icon-2x">	                                
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">	                                    
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">	                                       
                                <rect x="0" y="0" width="24" height="24"></rect>	                                        
                                <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" 
                                fill="#000000" fill-rule="nonzero"></path>	                                        
                                <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,
                                    4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,
                                    6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3">
                                </path>	                                    
                            </g>	                                
                        </svg>	                            
                    </span>							
                </a>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            hide-on-single-page   
            @size-change="handleSizeChange"        
            @current-change="handleCurrentChange"  
            :current-page="pageNo"                
            :page-sizes="[5, 10, 30, 50]"          
            :page-size="pageSize"			  
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="totalCount">		
          </el-pagination>
        </div>
      </div>
  </div> 
</template>
  
<script>
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js"; 
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
  export default {
    data(){
      return{
        searchForm:{keywords: ""},
        accountOnlineDataList:[],
        sels: [], //当前选框选中的值
        pageNo:1,      // 默认当前是第一页
        pageSize:5,    // 当前每页的数据是5条
        totalCount:0   // 总数默认为0
      }
    },
    components: {
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "在线用户" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods:{
      initList(){
        showWating({renderBody:"tableBody"});
        var params = {};
        params.usePageNo = true;//采用第几页进行分页（兼容）
        params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
        params.pageNo = this.pageNo;//开始的记录序号   
        params.searchJson = JSON.stringify(this.searchForm);//为form元素     
        apiUtil.queryPage(process.env.VUE_APP_OAUTH_API+"/oauthOnline/list", params).then(({ data }) => {
          this.accountOnlineDataList = data.data;//给结果集赋值
          this.totalCount = data.total;// 获取当前数据的总数    
        });
      },    
      handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
        this.pageSize = val;  // 修改页的大小
        this.initList();       // 按新的pageNo和pageSize进行查询
      },
      handleCurrentChange(val) { // 修改当前页所触发的函数
        this.pageNo = val;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      handleSelectionChange(sels) {//获取选中的值
        this.sels = sels;
      },
      search(){
        this.pageNo = 1;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      resetAll(){
        Object.assign(this.$data.searchForm, this.$options.data().searchForm);
        this.search();
      },
      removeAccount(row){
        let id = row.oauthAccountEntity.account_id;
        let account = row.oauthAccountEntity.account;
        let name =  row.oauthAccountEntity.name;
        console.log(row);
        this.$confirm('确定要剔除姓名：'+name+'，登录账户：'+account+'？', "提示", {type: "warning",}).then(() => {
          var params = {};
          apiUtil.delete(process.env.VUE_APP_OAUTH_API+'/oauthOnline/delete/'+id,params).then(data=>{
            if(data.data.success){
              handleAlert("剔除成功", "success", 3);
              this.search();
            }else {
              handleAlert("剔除失败", "error", 3);
            }
          });
        }).catch(()=>{});//注意这里，这里是重点！！！;
      },
    }
  };
</script>